<?php echo $this->render('/public/header'); ?>
<script src="https://cdn.bootcss.com/element-ui/2.0.4/index.js"></script>
<!-- 引入组件库 -->
<link href="https://cdn.bootcss.com/element-ui/2.0.4/theme-chalk/index.css" rel="stylesheet">
<div id="main" class="col-lg-12 col-md-12 col-xs-12">
    <el-row>
        <el-button @click="handlerShow" type="primary">添加分组</el-button>
    </el-row>
    <br/>
    <br/>

    <el-row v-if="show">
        <el-col :span="8">
            <el-transfer v-model="value" :data="data" :titles="['未添加', '添加']"></el-transfer>
            <br/>
            <el-input v-model="group_name" placeholder="分组名称" style="width:30%"></el-input>
            <br/>
            <br/>
            <el-button @click="handlerAdd" type="primary">添加</el-button>
        </
        <el-col>
    </el-row>

    <el-row v-if="!show">
        <el-col :span="8">
            <el-select v-model="select_value" placeholder="请选择" @change="change">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <br/>
            <br/>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>消息将发送给以下用户</span>
                </div>
                <div v-for="v in staff" v-if="show_staff(v.job_number)" class="text item">
                    {{v.name}}
                </div>
            </el-card>
            <br/>
            <el-input
                    type="textarea"
                    :rows="4"
                    autosize
                    placeholder="请输入消息内容"
                    v-model="msg">
            </el-input>
            <br/>
            <br/>
            <el-button type="success" @click="send">提交广播</el-button>
            <el-col>

    </el-row>
</div>
<script>
    var vm = new Vue({
        el: "#main",
        data: {
            value: [],//已选择员工
            staff:<?php echo json_encode($this->params['staff_list']);?>,
            data: [],
            show: false,
            select_value: "",
            group:<?php echo json_encode($this->params['group']);?>,
            options: [],
            group_name: "",
            msg: ""//广播消息
        },
        created: function () {
            for (let i in this.staff) {
                this.data.push({
                    key: this.staff[i].job_number,
                    label: this.staff[i].name,
                })
            }
            for (let i in this.group) {
                this.options.push({
                    value: this.group[i].id,
                    label: this.group[i].group_name
                })
            }
        },
        methods: {
            handlerShow() {
                if (this.show) {
                    this.show = false;
                }
                else {
                    this.show = true;
                }

            },
            handlerAdd() {
                if (this.value.length <= 0) {

                    this.$message.error("未选择任何员工");
                    return false;
                }
                if (this.group_name.length <= 0) {
                    this.$message.error("未填写组名");
                    return false;
                }
                var data = {};
                data.group_name = this.group_name;
                data.staff = JSON.stringify(this.value);
                $.post('/setting/broadcast_add', data, (res) => {
                        this.$messgae(res.msg);
                    },
                    'json'
                )
            },
            change(v) {
                console.log(v);
            },
            show_staff(job_number) {
                if (this.select_value >= 1) {
                    var arr;
                    for (let i in this.group) {
                        if (this.group[i].id == this.select_value) {
                            arr = this.group[i].staff;
                        }
                    }
                    data = JSON.parse(arr);
                    for (let i in data) {
                        if (data[i] == job_number) {
                            return true;
                        }
                    }
                    return false;
                }
            },
            send() {
                this.$confirm('确认发送广播').then(() => {
                    if (this.msg.length <= 0
                    ) {
                        this.$notify.error("消息不能为空");
                        return false;
                    }
                    if (this.select_value <= 0) {
                        this.$notify.error("未选择分组");
                        return false;
                    }
                    var data = {};
                    data.group_id = this.select_value;
                    data.msg = this.msg;
                    $.post('/setting/broadcast_act', data, (res) => {
                            if (res.code == 1
                            ) {
                                this.$message(res.msg);
                                setTimeout(() => {
                                        window.location.reload();
                                    },
                                    1000
                                )
                                ;
                            }
                            else {
                                this.$message(res.msg);
                            }
                        },
                        'json'
                    )
                }).catch(() => {
                    console.log('cancel');
                })
            }
        }
    })
</script>
<?php echo $this->render('/public/footer'); ?>
